<template>
   <div>
     <div class="notice">
       <!--左侧-->
       <div class="notice-left">
         <div>
           <i class="icon iconfont icon-zuoyoujiantou-copy-copy icon-back" @click="$router.go(-1)"></i>
           <i class="icon iconfont icon-zuoyoujiantou-copy-copy"  @click="$router.go(1)"></i>
         </div>
         <i class="icon iconfont icon-shuaxin" @click="$router.go(0)"></i>
       </div>

       <!--面包屑导航-->
       <div class="notice-crumbs">
         <span class="tit">当前位置：</span>
         <i class="icon iconfont icon-fang"></i>
         <router-link to="/">首页</router-link>
         <i class="icon iconfont icon-zuoyoujiantou-copy-copy"></i>
         <router-link to="/personal">个人中心</router-link>
       </div>

       <!--通知-->
         <div class="notice-content" style="color: #1590ed">
              <span> 紧急通告：</span>
              <marquee class="left" loop="-1">{{topmsg}}</marquee>
         </div>
     </div>
   </div>
</template>

<script type="text/babel">
  export default {
    name: 'Personal',

    data(){
       return {
         topmsg: '',
       }
    },
    created() {
      this.getIndexData();
      // setInterval(this.scroll,3000) ;// 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
      // 对接
      let that = this;
      that.getNotice();
      // 获取所有楼盘
      that.$http.get('/index/premises/all').then(res => {
      }).catch(err => {
      })
    },
    methods:{
      
      //首页数据  本周推荐房源  最新房源
      getIndexData(){
        let that = this;
        that.$http.post('/index')
        .then(res=>{
          console.log(res);
          that.indexData = res.data;
        }).catch(err=>{
          console.log(err);
        })
      },
      // 通知公告
      getNotice(){
        let that =this;
        // 通知公告
        that.$http.get('/index/notice')
        .then(function (res) {
          // console.log('通知公告',res)
          if(res.data.data.length == 0){
            that.topmsg = '暂无公告'
            return
          }
          that.noticeitems = res.data.data;
          that.topmsg = that.noticeitems[0].content;
        })
        .catch(function (err) {
          console.log(err);
        });
      },

    }
  }

</script>

<style scoped>
  @import "../../../static/personal/iconfont.css";
  .notice {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: 43px;
    padding: 10px 0;
    z-index: 998;
    /*line-height: 43px;*/
    background: #fff;
    border-bottom: 1px solid #d0d1d2;
  }


  /*左侧*/
  .notice-left{
    box-sizing: border-box;
    width: 120px;
    height: 100%;
    border-right: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .notice-left .iconfont{
    font-size: 20px;
    cursor: pointer;
    padding: 0 10px;
  }
  .notice-left .icon-back{
    display: inline-block;
    transform: rotate(180deg);
  }
  .notice-left .icon-zuoyoujiantou-copy-copy:last-child{
    color: #999;
    padding: 0;
  }

  /*面包屑导航*/
  .notice-crumbs{
    display: flex;
    align-items: center;
    width: 23%;
    padding-left: 30px;
    border-right: 1px solid #ccc;
  }
  .notice-crumbs .tit{
    font-weight: bold;
    color: #898989;
  }
  .notice-crumbs .icon-zuoyoujiantou-copy-copy,
  .notice-crumbs .icon-fang{
    color: #898989;
  }
  .notice-crumbs a{
    color: #898989;
    font-weight: 600;
    margin: 0 5px;
  }
  .notice-crumbs a:last-child{
    color: #1590ed;
  }

  /*通知*/
  .notice-content{
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0 30px;
  }
  .notice-content span{
    flex-shrink: 0;
    font-weight: bold;
    color: #333;
  }
</style>
